<script setup>
const dataList = ref({});
const { data } = await $fetch(`/api/down?type=hot`);
dataList.value = data;
</script>
<template>
  <div class="text-[16px] font-bold mt-[20px]">热门软件</div>
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-[20px] mt-[20px]">
    <div
      v-for="soft in dataList.hotSoftWares"
      class="h-[176px] bg-[#fff] rounded-[20px] flex items-center px-[20px]"
    >
      <img :src="soft.logo_image" class="size-[100px]" />
      <div class="grow ml-[10px]">
        <ul>
          <li class="font-bold">
            {{ soft.main_name }}
          </li>
          <li class="py-[10px]">
            {{ soft.name }}
          </li>
          <li class="line-clamp-3 text-[12px] text-[#666]">
            {{ soft.description }}
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="text-[16px] font-bold mt-[20px]">热门产品</div>
  <div class="grid grid-cols-1 lg:grid-cols-4 gap-[20px] mt-[20px]">
    <div
      v-for="hot in dataList.hotProducts"
      class="h-[350px] bg-[#fff] rounded-[20px] flex flex-col justify-center items-center"
    >
      <div class="font-bold">{{ hot.name }}</div>
      <img :src="hot.imageUrl" class="h-[180px] my-[10px]" />
      <a
        class="h-[30px] w-[120px] text-[#fff] rounded-[20px] leading-[30px] text-center bg-[#444]"
        href="#"
        >相关软件下载</a
      >
      <a class="mt-[20px]" href="#">相关文档下载</a>
    </div>
  </div>
</template>
<style scoped lang="scss"></style>
